{% extends "login.html" %} 
{% block title %}Search Course{% endblock %} 
{%block navigation %}>><a href="/search/">Search Course </a> {% endblock %} 
{% block menu %}
  <ul class="menu">
	<li ><a href="/course/">Home</a></li>
	<li><a href="/create/">Create Course</a></li>
	<li class="active"><a href="/search/">Search Course</a></li>
</ul>
{% endblock %} 

{% block content %}

	<form action="." method="post">{% csrf_token %}
		<p><label for="id_university">University:</label></p>
		<p>{{ form.university }}<p>
		<p><label for="id_course_title">Course Title:</label> 
		<p>{{ form.course_title }}</p>
		<p><label for="id_course_code">Course Code:</label></p>
		<p>{{ form.course_code }}</p>
		<p><label for="id_course_subject">Course Subject:</label></p>
		<p>{{ form.course_subject }}</p>
		<input class = "button" type="submit" value="Search" />
	</form>

	<!-- Content box with light blue background -->
	{% if CourseList %} {% for Course in CourseList %}
			<div class="course">
							<div class="date2">
					<div class="ratevalue">
					{{ Course.course_average }}						
					</div>
				</div>
				<div class="date">
					<div class="day">
					<div class = "ratestar">{{ Course.course_average }}</div>						
					</div>

				</div>
				<h3>
					<a href="/course/{{ Course.id }}/">{{ Course.course_title }}</a>
				</h3>
				<div id="university">
					<p>{{ Course.school.university }}</p>			
				</div>
				<div class="tutor">{{  Course.course_date }}</div>
				<div class="cleaner">&nbsp;</div>

			</div>
			{% endfor %} {% else %}
			<p>No course created</p>
			{% endif %}
	<!-- Content box with light blue background end -->
<script type="text/javascript">	
  jQuery(function() {
	  
		$(function() { 
			$('div.ratestar').ratecourse();
		});
           
  });
  
  $.fn.ratecourse = function (){
		return $(this).each(function() { 
	        // Get the value 
	        var rate = parseFloat($(this).html()); 
	        // Make sure that the value is in 0 - 5 range, multiply to get width 
	        var width = (rate/5) * 55; 
	        $(this).html('<div class="rating_bar"><div style="width:' + width + 'px"></div></div>');
	      
	    }); 		
	}
 </script> 
{% endblock %}
